<template>
	<view class="content">
		<view class="print_center">
			<checkbox-group class="checke_list" v-model="checkboxValue" @change="checkboxGroup">
				<label class="uni-list-cell uni-list-cell-pd checke_item" v-for="(item, index) in dataList"
					:key="index">
					<view class="item_top">
						<checkbox :value="JSON.stringify(item)" :iconColor="bgColor" :checked="item.checked"
							class="round-checkbox" :disabled="item.selected" />
						<view class="item_img">
							<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
						</view>
						<view class="card_right item_right">
							<view class="card-name" style="display: flex;justify-content: space-between;">
								<text style="font-size: 31rpx;font-weight: bold;"><span
										v-if="item.brandName">[{{item.brandName}}]</span>{{item.name}}<span
										style="margin-left: 10rpx;">{{item.sku}}</span></text>
							</view>
							<view style="margin: 20rpx 0;font-size: 28rpx;color: #828282;">
								{{item.operateCityName}}
							</view>
							<view class="content-list">
								<view style="display: flex;align-items: center;justify-content: space-between;">
									<view style="color: #000;">
										￥{{item.price}}
									</view>
									<view>
										<text style="color: #4b4b4b;margin-right: 10rpx;">剩余库存</text>{{item.stock}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>

	</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js';
	let app = getApp();
	export default {
		props: {
			// tab: {
			// 	type: [Object],
			// 	default: ''
			// },

			dataList: {
				type: [Array],
				default: ''
			},
			bgColor: {
				type: String,
				default: 'blue'
			},
		},
		data() {
			return {
				// bgColor: '#ffffff',
				theme: app.globalData.theme,
				productList: [{
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: '酱香八宝4.5kg',
					brandName: '鲁英',
					skuName: '1箱', //1:活动中，2未开始，3已结束
					operateCityName: '北京',
					price: 19.35,
					inventory: 567,
				}],
				showUpDatePopup: false,
				//--------------------------------
				checkboxValue: [],
				// isAllChecked: false,
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		watch: {
			checkboxValue(newVal, oldVal) {
				const enabledItemsLength = this.dataList.filter(item => !item.selected).length;
				console.log(enabledItemsLength,this.checkboxValue.length)
				if (enabledItemsLength == this.checkboxValue.length) {
					this.$emit('isAllChecked', true);
				} else {
					this.$emit('isAllChecked', false);
				}
			},
		},
		methods: {
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.productParam.current++;
				this.getProductList(true);
			},
			toDetails() {
				this.$emit('toDetails');
			},
			showInfoModal(index, product) {
				this.$emit('showInfoModal', {
					index: index,
					product: product
				});
			},
			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}

				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
			toActiveDetails() {
				this.$emit('toActiveDetails');
			},

			/** 
			 * 复选框事件
			 */
			checkboxGroup(ele) {
				//-----------
				console.log(ele)
				// let checkBoxValue = ele.detail.value;
				// let checkBoxGroup = checkBoxValue.map((item) => JSON.parse(item));
				// for (let item of checkBoxGroup) {
				// 	item.checked = true;
				// };
				// this.checkboxValue = checkBoxGroup;
				
				if (ele && ele.detail && ele.detail.value && ele.detail.value.length) {
					let checkboxValue1 = []
					for (var i = 0; i < ele.detail.value.length; i++) {
						checkboxValue1.push(JSON.parse(ele.detail.value[i]))
					}
					this.$set(this, 'checkboxValue', checkboxValue1)
					this.$emit('checkboxChange', checkboxValue1);
				} else {
					this.$emit('checkboxChange', ele);
				}
				// console.log('this.checkboxValue:', this.checkboxValue)
			},
			
			// -- 父组件调用，全选或清除所有选项
			checkboxAllSelect(isClean) {
				let that = this;
				if (isClean) {
					this.checkboxValue = [];
					for (let item of that.dataList) {
						item.checked = false;
					}
				} else {
					
					for (let item of that.dataList) {
						// item.checked = true;
						if (!item.selected) {
							item.checked = true;
							this.checkboxValue.push(item);
						}
					}
				}
				// this.checkboxGroup(this.checkboxValue);
			},
		}
	}
</script>

<style scoped lang="scss">
	.main_color {
		@include main_color(theme);
	}

	.font-color {
		@include main_color(theme);
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $main-color-theme1;
	}

	.cards {
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx 24rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.print_center {
		// margin-top: 10px;
		// background-color: white;
		flex: 1;
		overflow: scroll;

		.checke_list {
			// width: 100%;
			margin: 20rpx;

			.checke_item {
				display: flex;
				flex-direction: column;
				// justify-content: space-around;
				// align-items: center;
				background-color: white;
				padding: 20px;
				margin-top: 10px;
				width: 100%;
				border-radius: 20rpx;

				.item_top {
					display: flex;
					// justify-content: space-around;
					align-items: center;

					.item_img {
						margin-right: 10px;

						image {
							width: 50px;
							height: 70px;
						}

					}

					.item_right {
						font-weight: bold;
						line-height: 20px;
						display: flex;
						flex-flow: column;
						flex: 1;
					}
				}

				.item_bottom {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.counter {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100px;
						height: 30px;
						border: 1px solid #ccc;
						border-radius: 5px;
						overflow: hidden;
					}

					.counter text {
						width: 40px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						font-size: 16px;
						color: #333;
					}
				}
			}
		}
	}

	.card_right {
		display: flex;
		flex-flow: column;
		flex: 1;
		margin: 6px 6px 0 6px;

		.u-line {
			display: -webkit-box !important;
			/* overflow: hidden; */
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical !important;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>